<template>
  <header class="view-header">
    <div class="header-container">
      <div class="header-title">
        <i class="el-icon-s-grid"></i>
        <span v-text="title"></span>
      </div>
      <div class="header-form">
        <div class="header-form-item">
          <el-button plain type="danger" icon="el-icon-delete" :loading="delLoading" @click="del">{{delText}}
          </el-button>
        </div>
        <div class="header-form-item">
          <el-button plain type="primary" icon="el-icon-edit" @click="openEditDialog(true)">编辑</el-button>
        </div>
        <div class="header-form-item" v-if="isNeedAdd">
          <el-button plain type="success" icon="el-icon-plus" @click="openEditDialog(false)">添加</el-button>
        </div>
        <div class="header-form-item" v-if="isNeedSearch">
          <el-button plain icon="el-icon-search" @click="fetchData">查询</el-button>
        </div>
        <slot name="search-item-1"></slot>
        <slot name="search-item-2"></slot>
        <slot name="search-item-3"></slot>
        <slot name="search-item-4"></slot>
      </div>
    </div>
  </header>
</template>

<script>
  export default {
    name: 'ListHeader',
    props: {
      title: {
        type: String,
        required: true
      },
      delLoading: {
        type: Boolean,
        required: true
      },
      delText: {
        type: String,
        required: true
      },
      isNeedSearch:{
        type:Boolean,
        required: false,
        default:true
      },
      isNeedAdd:{
        type:Boolean,
        required: false,
        default:true
      }
    },
    methods: {
      fetchData() {
        this.$emit('fetch-data')
      },
      del() {
        this.$emit('del')
      },
      openEditDialog(isEdit) {
        this.$emit('open-edit-dialog', isEdit)
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
